<template>
  <div class="page">
    <div class="title-wrap">
      <h3 class="sub-title success-color">
        查看excel单元格与单元之间内容的重复情况
      </h3>
    </div>
    <div class="cont">
      <div class="upload-area">
        <div class="upload-area-inner" id="drop">
          <div class="img-wrap">
            <img :src="uploadImg" alt="" />
            <input
              type="file"
              class="origin-btn"
              id="uploadBtn"
              :accept="acceptType"
            />
          </div>
          <div class="tip">点击图标上传文件或者将文件拖到此处</div>
        </div>
        
      </div>
      <div class="upload-result" v-if="uploadFile">
          <div class="icon">
            <el-icon size="20"><Document /></el-icon>
          </div>
          <div class="title">
            {{ uploadFile.name }}
          </div>
          <div class="tools">
            <el-icon class="close-icon" size="20" @click="deleteThisFile"><Close /></el-icon>
            <!-- <el-icon class="success-icon" size="20" color="green"><SuccessFilled /></el-icon> -->
          </div>
        </div>
      <div class="upload-footer">
        <div class="upload-tip danger-color" v-if="uploadTip">
          {{ uploadTip }}
        </div>
      </div>
      <div class="upload-footer">
        <div class="upload-tip primary-color">
          说明：根据查重次数（默认3次），查找excel中重复了这么多次的数据都有哪些。支持1个单元格有多个数字的情况。
        </div>
        <!-- <div class="refresh primary-color" @click="refresh">刷新</div> -->
      </div>
      <!-- <div class="tip">
        使用说明：根据查重次数（默认3次），查找处excel中重复了这么多次的数据都有哪些。
      </div> -->
      <div class="form-input">
        <div class="label">查重次数：</div>
        <div class="value">
          <el-input v-model.number="repeadNum" placeholder="请输入要查询重复的次数" />
        </div>
      </div>
      <div class="btn-group">
        <el-button type="danger" @click="refresh">清除</el-button>
        <el-button type="primary" @click="parseExcelFile">确定</el-button>
      </div>
    </div>
  </div>
</template>
<script setup>
import uploadImg from '@/assets/images/upload.png'
import { ref, reactive, onMounted } from 'vue'
import { columnOptions } from '@/utils/commonData.js'
import {
  Document,
  Close,
  SuccessFilled,
  StarFilled
} from '@element-plus/icons-vue'
import * as XLSX from 'xlsx'
import { ElMessage } from 'element-plus'
import {
  strToBlob,
  escapeRegExp,
  getSpecialCharOriginChar
} from '@/utils/tools'
const repeadNum = ref(3)
const acceptType = ref(
  'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.ms-excel'
)
const uploadTip = toRaw('提示：手机屏幕较小，显示不便，请使用电脑！')
const uploadFile = ref(null)

function initDropEvent() {
  let droptarget = document.getElementById('drop')
  droptarget.addEventListener(
    'dragenter',
    function (e) {
      e.preventDefault()
      e.stopPropagation()
    },
    false
  )
  droptarget.addEventListener(
    'dragover',
    function (e) {
      e.preventDefault()
      e.stopPropagation()
    },
    false
  )
  droptarget.addEventListener(
    'drop',
    function (e) {
      e.preventDefault()
      let fileArr = []
      uploadFile.value = e.dataTransfer.files[0]
    },
    false
  )
  droptarget.addEventListener(
    'dragleave',
    function (e) {
      e.preventDefault()
      e.stopPropagation()
    },
    false
  )
}
function initUploadEvent() {
  let that = this
  // 初始化上传事件
  let uploadEl = document.getElementById('uploadBtn')
  uploadEl.addEventListener('change', function (event) {
    let file = event.target.files[0]
    if (file) {
      uploadFile.value = file
      ElMessage.success('上传成功')
    }
    uploadEl.value = ''
  })
}

function deleteThisFile() {
  uploadFile.value = null
  ElMessage.success('删除成功')
}
async function parseExcelFile() {
  let file = uploadFile.value
  if (!file) {
    ElMessage.warning('请先上传文件')
    return
  }
  if(!Number.isInteger(repeadNum.value) || repeadNum.value < 1){
    ElMessage.warning('重复次数必须是大于0整数')
    return
  }
  let arrayBuffer = await file.arrayBuffer()
  let wb = await XLSX.read(arrayBuffer)
  let ws = wb.Sheets[wb.SheetNames[0]]
  let aoa = XLSX.utils.sheet_to_json(ws, { header: 1 })
  console.log('aoa:', aoa)
  // aoa [['1，2，3', '2,3,4', '1,4,5', '1,6,10'],[],[]]
  // 将aoa每个单元格的数据拆分
  aoa = aoa.map((item) => {
    return item.map((cell) => {
      if (cell) {
        return cell.split(',').map((item) => {
          return item.trim()
        })
      } else {
        return []
      }
    })
  })
}
function refresh() {
  window.location.reload()
}
function showRule(){

}
onMounted(() => {
  initUploadEvent()
  initDropEvent()
})
</script>
<style lang="scss" scoped>

.page {
  .title-wrap {
  }
  .cont {
    .upload-area {
      margin: auto;
      max-width: 480px;
      border-radius: 4px;
      padding: 20px;
      box-sizing: border-box;
      background: rgba(17, 150, 219, 0.1);

      .upload-area-inner {
        border: 2px dashed white;
        padding: 20px;
        position: relative;
      }
      .origin-btn {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0px;
        left: 0px;
        opacity: 0;
      }
      .img-wrap {
        width: 80px;
        height: 80px;
        margin: auto;
        position: relative;
        img {
          width: 100%;
          height: 100%;
        }
      }
      .tip {
        margin-top: 30px;
        text-align: center;
        font-weight: bold;
      }
      
    }
    .upload-result {
      
      margin: auto;
      max-width: 480px;
      border-radius: 4px;
      margin-top:20px;
      display: flex;
      align-items: flex-start;
      &:hover{
        background-color: #f5f5f5;
      }
        .icon {
          width: 40px;
        }
        .title {
          width: 260px;
          overflow: hidden;
          text-overflow: ellipsis
        }
        .tools {
          width: 40px;
          display: inline-block;
          cursor: pointer;
          margin-left:auto;
          margin-right:0;
          // &:hover {
            
          //   .success-icon{
          //     display: none;
          //   }
          //   .close-icon{
          //     display: block;
          //   }
          // }
          .success-icon{
            display: block
          }
          .close-icon{
            display: block
          }
          
        }
      }
    .upload-footer {
      margin: auto;
      max-width: 480px;
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      margin: auto;
      margin-top: 16px;
      .upload-tip {
        width: 100%;
        font-size: 14px;
        line-height: 20px;
      }
      .refresh {
        cursor: pointer;
        margin-left: auto;
      }
    }
    .btn-group {
      display: flex;
      justify-content: flex-end;
      margin-top: 20px;
      .el-button {
        margin-left: 20px;
      }
    }
  }
  .tip{
    margin-top: 20px;
    text-align: right;
    font-size: 16px;
    line-height: 20px;
    
    .tap{
      cursor: pointer;
    }
    .underline{
      text-decoration: underline;
    }
  }
  .form-input{
    display: flex;
    align-items: center;
    margin-top: 20px;
    justify-content: flex-end;
    .label{
      // width: 120px;
      text-align: right;
      margin-right: 10px;
      // flex-shrink: 0;
    }
    .value{
      width: 240px;
      min-width: 240px;
      flex-shrink: 0;
    }
  }
}
</style>
